<template>
    <div class="validate">
          <div class="item">
              <div class="label required">活动名称</div>
              <div class="content border" :class="{ 'err': errList.includes('name')}">
                <input type="text" v-model="formData.name">
              </div>
              <p class="tip" v-if="errList.includes('name')">活动名称为必填</p>
          </div>

          <div class="item">
              <div class="label required">活动区域</div>
              <div class="content border">
                <select v-model="formData.zone">
                  <option value="" disabled>请选择</option>
                  <option value="bg">北京</option>
                  <option value="sh">上海</option>
                </select>
              </div>
          </div>

          <div class="item">
              <div class="label">即时配送</div>
              <div class="content">
                <input type="checkbox" v-model="formData.isInstant">
              </div>
          </div>

          <div class="item">
              <div class="label required">活动性质</div>
              <div class="content">
                <label v-for="d in propsList" :key="d.value">
                  <input type="checkbox" v-model="formData.propsList" :value="d.value">{{d.name}}
                </label>

              </div>
          </div>

          <div class="item">
              <div class="label required">特殊资源</div>
              <div class="content ">
                <label><input type="radio" v-model="formData.special" value="a">品牌赞助</label>
                <label><input type="radio" v-model="formData.special" value="b">场地免费</label>
              </div>
          </div>

          <div class="item">
              <div class="label required">活动形式</div>
              <div class="content border">
                <textarea v-model="formData.info"></textarea>
              </div>
          </div>

          <div class="item">
              <div class="label"></div>
              <div class="content">
                <input type="submit" value="提交" @click="submit">
                <input type="reset" value="重置">
              </div>
          </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        formData: {
            name: '',
            zone: '',
            isInstant: false,
            propsList: [],
            special: '',
            info: ''
        },
        // 活动性质的备选项
        propsList: [{
          name: '线上推广',
          value: 'online'
        }, {
          name: '地推活动',
          value: 'offline'
        }, {
          name: '百度推广',
          value: 'baidu'
        }],
        errList: []
      }
    },

    methods: {
      submit() {
        console.log(this.formData.isInstant,this.formData.name,this.formData.zone, this.formData.propsList,this.formData.special, this.formData.info)
        const arr  =Object.entries(this.formData).filter(item => {
          const v = item[1];
          if (typeof(v) === 'string' && !v) return true;
          if(Array.isArray(v) && !v.length) return true;
          return false;
        }).map(item => item[0])
        this.errList = arr;
      }
    }
}
</script>

<style lang="sass">
    .validate
      width: 600px
      border: 1px solid #666
      border-radius: 3px
      padding: 20px
      margin: 0 auto
      .item
        display: flex
        margin-bottom: 20px
        position: relative
        .tip
          position: absolute
          left: 150px
          bottom: -18px
          color: red
          font-size: 12px
      .label
        width: 150px
        &.required::before
          content: "*"
          color: red
      .content
        flex: 1
        text-align: left
        &.border
          border: 1px solid #666
          border-radius: 3px
          &.err
            border-color: red
          input, textarea, select
            background: transparent
            width: 100%
            height: 100%
            padding: 0 5px
            box-sizing: border-box
            &:focus
              outline: none
          textarea
            height: 80px


</style>
